<template>
  <div class="top">
    <nav>
      <van-tabs class="tabs">
        <van-tab
          v-for="item in nav"
          :key="item.id"
          :title="item.name"
        />
      </van-tabs>
      <div class="icon-wrapper">
        <van-icon name="search" />
      </div>
      <div class="icon-wrapper">
        <van-icon name="wap-nav" />
      </div>
    </nav>
    <!-- 可视容器 -->
    <main class="wrapper">
      <!-- 循环取值容器 -->
      <div
        v-for="d in content"
        :key="d.id"
      >
        <!-- 每一小块区域 分三种情况 -->
        <!-- 没有图片 -->
        <div
          v-if="d.cover.type === 0"
          class="title"
        >
          {{ d.title }}
        </div>
        <!-- 一张图片 -->
        <div
          class="img-one-wrapper"
          v-if="d.cover.type === 1"
        >
          <div class="one-image">{{ d.title }}</div>
          <img :src="d.cover.images">
        </div>
        <!-- 大于一张图片 -->
        <div
          v-if="d.cover.type > 1"
          class="img-else-wrapper"
        >
          <div class="else-image"> {{ d.title }}</div>
          <img
            v-for="c in d.cover.images"
            :key="c"
            :src="c"
          >
        </div>
        <!-- 点赞和评论区域 -->
        <div class="button-contanier">
          <span>{{ d.aut_name }}</span>
          <span>{{ d.comm_count }}评论</span>
          <span>{{ getTime(d.pubdate) }}</span>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import axios from 'axios'
import moment from 'moment';
export default {
  name: 'HomePage',
  data() {
    return {
      nav: [],
      content: [],
    };
  },
  // async created() {
  //   const res = await axios({
  //     method: 'get',
  //     url: 'http://toutiao.itheima.net/v1_0/channels'
  //   })
  //     .then(res => res.data.data.channels)
  //     .catch(() => []);
  //   this.nav = res;
  // },
  created() {
    this.nav = this.$store.state.channelList;
    this.content = this.$store.state.articleList;
  },
  methods: {
    onAdd() {
      this.$store.commit('increment')
    },
    getTime(timestamp) {
      return moment(timestamp).fromNow();
    },
  },
}

</script>

<style lang="less" scoped>
.top {
  display: flex;
  flex-direction: column;
  nav {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0 3px 3px rgb(248, 244, 244);

    .tabs {
      flex: 1;
      overflow: hidden;

      &::after {
        content: "";
        display: block;
        height: 100%;
        width: 40px;
        position: absolute;
        top: 0;
        right: -1px;
        background: linear-gradient(to right, transparent, #fff);
      }
    }

    .icon-wrapper {
      margin: 8px;
      &:last-child {
        margin-right: 16px;
      }
    }
  }
}
.wrapper {
  padding-left: 16px;
  padding-right: 16px;
  height: calc(100vh - 44px);
  overflow: auto;
}
// 一张以上图片的容器
.img-else-wrapper {
  margin-top: 10px;
  img {
    display: inline-block;
    width: calc(100% / 3);
    height: 80px;
    border-radius: 2px;
  }
  .else-image {
    margin-bottom: 10px;
  }
}
// 一张图片的容器
.img-one-wrapper {
  margin-top: 10px;
  display: flex;
  img {
    display: inline-block;
    width: calc(100% / 3);
    height: 80px;
    border-radius: 2px;
  }
  .one-image {
    flex: 1;
  }
}
.title{
  margin-top: 10px;
}


.button-contanier {
  padding-top: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  font-size: 12px;
  color: #aaa;
}
span {
  margin-right: 10px;
}

</style>
